<template>
	<view class="refund-progress">
		<view class='pay-money' v-if="cancelAmount">
			<view class='left'>退款总金额</view>
			<view class='right'>￥{{cancelAmount}}</view>
		</view>
		<view class='pay-money'>
			{{cancelReason}}
		</view>
		<view class='step-list'>
			<view class='step-item' v-for='(item, index) in statusList' :key='index'>
				<view class="item-icon">
					<view v-if='!item.active' class="icon-circle"></view>
					<image v-else class='icon-img' mode='widthFix' src='@appstatic/img/my/choose_icon.png' ></image>
					<view class='icon-title'>{{item.statusName}}</view>
				</view>
				<view class='item-sub1'>{{item.reviewTime}}</view>
				<view v-if="(item.statusName == '审核通过') && item.active" class='item-sub2'>退款金额将在7-15个工作日内返回到您的账户</view>
				<view v-if='index !== statusList.length - 1' :class="item.active ? 'line active': 'line'"></view>
			</view>
		</view>
		<!-- <view class='bottom-btn' @click='cancleOrder()'>取消退款</view> -->
		<clxDialog :isShow='show' @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel' :title="title" :confirmText='confirmText' :isShowCancel="isShowCancel"></clxDialog>
	</view>
		
</template>

<script>
	import clxDialog from '../../../../components/clx-dialog/clx-dialog.vue'
  const app = getApp();
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');
	const dialog = require('@utils/dialog.js');
	export default {
		components: {
			clxDialog
		},
		data() {
			return {
				statusList: [
					{
						statusName: '申请退款',
						active: false,
						reviewTime: '',
						sub2: ''
					},
          {
						statusName: '平台审核',
						active: false,
						reviewTime: '',
						sub2: ''
					},
          {
						statusName: '审核通过',
						active: false,
						reviewTime: '',
						sub2: ''
					},
          {
						statusName: '退款成功',
						active: false,
						reviewTime: '',
						sub2: ''
					},
				],
				show: false,
				title: '取消退款成功！',
				confirmText: '确认',
				isShowCancel: false,
				id: null,
				cancelAmount: null,
				cancelReason: null,
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
      this.id = options.id
      // this.cancelAmount = options.cancelAmount
			
		},
		onShow: function() {
      this.getList()
		},
		methods: {
      getList() {
        let url = app.globalData.config.interfaces.URL_LIFAN_REFUND_DETAIL
				let params = {
          orderId: this.id
				}
        network.get(url, params, 'form').then(res => {
					if (res.code == 200) {
						this.cancelAmount = res.data && res.data.cancelMoney ? res.data.cancelMoney: null
						this.cancelReason = res.data && res.data.cancelReason ? res.data.cancelReason: null
            this.statusList = Object.assign(this.statusList, res.data.statusList)
            this.statusList.map((item, index) => {return item.active = Boolean(index < res.data.statusList.length)})
            this.statusList = this.statusList.reverse()
            if (this.statusList[1].statusName == '不予退款') {
              this.statusList.shift()
            }
					} else {
						uni.showToast({
							title: res.message,
							duration: 2000,
							icon: 'none'
						})
					}
				}).catch(res => {
				})
      },
			
			cancleOrder() {
				this.show = true
			},

			dialogConfirm(data) {
				console.log('dialogConfirm', data)
				this.show = false
			},
			
			dialogCancel(data) {
				console.log('dialogCancel', data)
				this.show = false
			},

		},
	}
</script>

<style>
	@import "./refundProgress.css";
</style>
